<template>
	<view>
		<u-popup overlay-style="z-index:99" z-index="100" :show="show">
			<view style="width: 100vw ;height: 100vh;">
				<l-signature backgroundColor="" disableScroll ref="signatureRef"></l-signature>
			</view>
			<view class="signButtom">
				<button @click="onClick('cancel')">关闭</button>
				<button @click="onClick('clear')">清空</button>
				<!-- <button @click="onClick('undo')">撤消</button> -->
				<button class="save" @click="onClick('save')">保存</button>
				<!-- uvue 不支持 openSmooth -->
				<!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {uploadFile} from "@/api/login.js"
	export default {
		name: "Signature",
		props: {
			showSign: {
				type: Boolean,
				default: false
			}
		},
		computed:{
			show(){
				return this.showSign;
			}
		},
		methods: {
			onClick(type) {
				const _ = this
				const signatureRef = this.$refs['signatureRef']
				if (type == 'save') {
					signatureRef.canvasToTempFilePath({
						success: (res) => {
							 uploadFile({
								filePath: res.tempFilePath
							}).then(res => {
								this.$emit("save",res.url)
							})
						}
					})
					return
				}
				if (type == 'undo') {
					signatureRef.undo()
				}
				if (type == 'redo') {
					signatureRef.redo()
				}
				if (type == 'clear') {
					signatureRef.clear()
				}
				if (type == 'cancel') {
					_.showSign = false
					signatureRef.clear()
				}
			}
		}
	}
</script>

<style scoped>
.signButtom {
		display: flex;
		position: absolute;
		padding-top: 250rpx;
		padding-right: 80rpx;
		top: 50%;
		left: 0;
		transform: translateY(80rpx);
		transform: rotate(90deg);

		button:nth-child(2) {
			margin: 0 50rpx;
			// margin-right: 50rpx;
		}

	}
</style>